<template>
  <view class="page">
    <view class="section" v-if="loading">
      <text>加载中...</text>
    </view>

    <view v-else>
      <!-- 地址信息 -->
      <view class="card address">
        <view class="row">
          <text class="name">{{ preview.address?.name }}</text>
          <text class="phone">{{ preview.address?.phone }}</text>
        </view>
        <view class="row sub">
          <text>{{ fullAddress }}</text>
        </view>
      </view>

      <!-- 商品清单 -->
      <view class="card goods">
        <view class="card-title">商品清单</view>
        <view class="goods-item" v-for="item in preview.items" :key="item.id">
          <image class="thumb" :src="item.image" mode="aspectFill" />
          <view class="info">
            <text class="title">{{ item.name }}</text>
            <view class="meta">
              <text class="price">¥{{ item.price }}</text>
              <text class="qty">x{{ item.quantity }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 费用汇总 -->
      <view class="card amounts">
        <view class="row"><text>商品金额</text><text>¥{{ preview.amounts?.goods_amount }}</text></view>
        <view class="row"><text>运费</text><text>¥{{ preview.amounts?.freight_amount }}</text></view>
        <view class="row"><text>优惠</text><text>-¥{{ preview.amounts?.discount_amount }}</text></view>
        <view class="row total"><text>应付金额</text><text class="total-price">¥{{ preview.amounts?.pay_amount }}</text></view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="footer-bar">
      <view class="sum">
        合计：<text class="em">¥{{ preview.amounts?.pay_amount || 0 }}</text>
      </view>
      <button class="btn-pay" :loading="submitting" @tap="onSubmit">立即支付</button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：下单确认页（结算页）
// - 进入时加载 /api/order/preview 获取预览数据
// - 点击支付：/api/order/create -> /api/pay/wechat
import { ref, computed, onMounted } from 'vue'
import http from '@/utils/request.js'

const loading = ref(true)
const submitting = ref(false)
const preview = ref({ items: [], amounts: {}, address: {} })

const fullAddress = computed(() => {
  const a = preview.value.address || {}
  return [a.province, a.city, a.district, a.detail].filter(Boolean).join(' ')
})

const loadPreview = async () => {
  try {
    loading.value = true
    // 备注：真实项目可传选中购物车ID、优惠券ID等，这里使用 Mock 默认
    const data = await http.post('/api/order/preview', {})
    preview.value = data || { items: [], amounts: {}, address: {} }
  } catch (e) {
    // 错误提示在 request 封装内已经处理
  } finally {
    loading.value = false
  }
}

const onSubmit = async () => {
  if (submitting.value) return
  try {
    submitting.value = true
    const order = await http.post('/api/order/create', {
      remark: '',
      coupon_id: preview.value.coupons?.[0]?.id || null
    })
    // 模拟调起微信支付（真实小程序环境应使用 uv.requestPayment）
    await http.post('/api/pay/wechat', { order_no: order.order_no })
    uni.showToast({ title: '支付成功', icon: 'success' })
    setTimeout(() => {
      // 跳转订单列表或订单详情占位，这里返回首页
      uni.switchTab({ url: '/pages/index/index' })
    }, 1200)
  } catch (e) {
    // 失败已由封装提示
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  loadPreview()
})
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 120rpx;
}
.section { padding: 40rpx; text-align: center; color: #666; }
.card { background: #fff; margin: 20rpx; border-radius: 16rpx; padding: 24rpx; }
.card-title { font-weight: 600; margin-bottom: 16rpx; }
.address .row { display: flex; justify-content: space-between; margin-bottom: 8rpx; }
.address .row.sub { color: #888; font-size: 26rpx; }
.goods-item { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1px solid #f5f5f5; }
.goods-item:last-child { border-bottom: none; }
.thumb { width: 140rpx; height: 140rpx; border-radius: 12rpx; background: #f5f5f5; }
.info { flex: 1; margin-left: 20rpx; }
.title { font-size: 28rpx; color: #333; }
.meta { display: flex; justify-content: space-between; margin-top: 12rpx; color: #999; }
.amounts .row { display: flex; justify-content: space-between; margin: 10rpx 0; }
.amounts .total { font-weight: 600; }
.total-price { color: #ff6b00; }
.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 20rpx; background: #fff; box-shadow: 0 -6rpx 16rpx rgba(0,0,0,0.04); }
.sum { color: #333; }
.sum .em { color: #ff6b00; font-weight: 700; }
.btn-pay { background: #ff6b00; color: #fff; border: none; padding: 0 40rpx; height: 80rpx; line-height: 80rpx; border-radius: 80rpx; }
</style>
